<template>
  <div class="app-container" style="overflow: scroll">
    <div style="width: 1024px;margin: 0 auto">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="120px">
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>批量客户账户查询录入</span>
        </div>
        <el-row type="flex">
          <el-col  :span="12">
            <el-form-item label="交易流水号" prop="rspId" :style="{ display: visibleHiden }">
              <el-input v-model="submitParams.rspId" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col  :span="12">
            <el-form-item label="发起参与机构" prop="sender">
              <el-input v-model="submitParams.sender" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col  :span="12">
            <el-form-item label="发起参与机构名" prop="senderName">
              <el-input v-model="submitParams.senderName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col  :span="12">
            <el-form-item label="接收参与机构" prop="directRecver">
              <el-input v-model="submitParams.directRecver" @change="checkbankcode('directRecver')"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="20px">
              <el-button
                icon="el-icon-search"
                plain
                type="primary"
                @click="openBankBranchDialog('directRecver')"
              >
                行名行号查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col  :span="24">
            <el-form-item label="接收参与机构名" prop="directRecverName">
              <el-input v-model="submitParams.directRecverName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col  :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="submitParams.remark" maxlength="256" show-word-limit/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>


      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>账户信息录入</span>
        </div>
        <el-row type="flex">
            <el-col  :span="12">
              <el-form-item label="查询账户数目" prop="count" >
                <el-input v-model="submitParams.count" :disabled="true"/>
              </el-form-item>
            </el-col>
        </el-row>

        <el-row type="flex">
          <el-col  :span="12">
            <el-form-item label="账户账号（卡号）" prop="acctCardNo">
              <el-input v-model="submitParams.acctCardNo" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-row type="flex">

          <el-col   :span="12">
            <el-form-item label="账户名称" prop="acctnm">
              <el-input v-model="submitParams.acctnm" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col  :span="12">
            <el-form-item label="开户银行行号" prop="acctBrno">
              <el-input v-model="submitParams.acctBrno" @change="checkbankcode('acctBrno')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="20px">
              <el-button
                icon="el-icon-search"
                plain
                type="primary"
                @click="openBankBranchDialog('acctBrno')"
              >
                行名行号查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col  :span="24">
            <el-form-item label="开户银行行名" prop="acctBrname">
              <el-input v-model="submitParams.acctBrname" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col  :span="12">
            <el-form-item label="公民身份号码" prop="ctznidnb">
              <el-input v-model="submitParams.ctznidnb" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row type="flex">
          <el-col   :span="12">
            <el-form-item label="电话/电挂" prop="telephone">
              <el-input v-model="submitParams.telephone" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row type="flex">
          <ht-table
            ref="dataTable"
            :multi-select="false"
            :showSerialNumber="false"
            :dictMap="dictMap"
            :initData="false"
            :tableBindColumns="tableBindColumns"
            :showRightToolbar="false"
            :showPagination="false"
            :opButtonList="opButtonList"
          >
            <template v-slot:operate>
              <el-table-column label="操作" align="left" width="50" fixed="right">
                <template slot-scope="scope">
                  <ht-button-group
                    :buttonList="[
                {
                  label: '删除',
                  visible: !formdisable,
                  doFunc: () => {
                    deleteRow(scope.$index, scope.row);
                  },
                },
              ]"
                  />
                </template>
              </el-table-column>
            </template>
          </ht-table>
        </el-row>
        <el-row>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="listCardNoList.length">
          </el-pagination>
        </el-row>

      </el-card>

      <el-row>
        <el-col  :span="24">
          <el-form-item align="center">
            <el-button type="primary" @click="submitForm" :disabled="formdisable" v-loading.fullscreen.lock="loading">
              提 交
            </el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>

    </div>
  </div>
</template>

<script>
import { batchCustomerAccountEntrySave } from "@/api/cnaps/beps/394";
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import { checkRcvStBrnoStatus } from "@/api/cnaps/common/check";
import { mapGetters } from "vuex";
export default {
  name: "generalInformationEntry",
  mixins: [listPageMixin],
  components: { BankBranchDialog },
  computed: {...mapGetters(["globalBusData"]),},
  created() {
    this.$set(this.submitParams, "sender", this.globalBusData.cnapsBrno);
    this.$set(this.submitParams, "senderName", this.globalBusData.cnapsBrname);
  },
  watch: {
    globalBusData: {
      handler(val) {
        this.$set(this.submitParams, "sender", val.cnapsBrno);
        this.$set(this.submitParams, "senderName", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      listCardNoList: [],
      curPage:1,
      pageSize:20,

      visibleHiden :'none',

      loading: false,
      tableBindColumns:[
        { prop:"acctCardNo", label:"账户账号（卡号）"},
        {prop:"acctnm" ,label:"账户名称"},
        {prop:"acctBrno", label:"开户银行行号"},
        {prop:"ctznidnb", label:"公民身份号码"},
        {prop:"telephone", label:"电话/电挂"}
      ],
      opButtonList: () => {
        return [
          {
            label: "新增",
            type: "primary",
            icon: "el-icon-plus",
            actionType: "add",
            clickFun: () => {
              this.addRow();
            },
          },
        ];
      },
      // 录入参数
      submitParams: {
        rspId:undefined,
        sender:undefined,
        senderName:undefined,
        directRecver:undefined,
        directRecverName:undefined,
        remark:undefined,
        count:0,
        acctCardNo:undefined,
        acctnm:undefined,
        acctBrno:undefined,
        acctBrname:undefined,
        ctznidnb:undefined,
        telephone:undefined,
        listCardNo:[],

      },

      //
      searchFormDictList: ["ORGAN_SYSTYPE_310", "MNG_TYPE", "MSG_TYPE148"],

      formdisable: false,

      rules: {
        directRecver: [{ required: true, message: "请输入接收参与机构", trigger:  ['blur', 'change'] }],
        acctCardNo: [{ required: true, message: "请输入账户账号（卡号）", trigger: "blur" }],
        acctnm: [{ required: true, message: "请输入账户名称", trigger: "blur" }],
        acctBrno: [{ required: true, message: "请输入开户银行行号", trigger: ['blur', 'change'] }],

      },
    };
  },
  mounted() {},
  methods: {

    //切换每页显示数据量时的回调
    handleSizeChange(size) {
      this.pageSize = size;
      this.handleCurrentChange(this.curPage);
    },
    handleCurrentChange(curPage) {
      let page = this.listCardNoList.slice((curPage-1)*this.pageSize,curPage*this.pageSize);
      this.$refs.dataTable.dataList = page
      this.curPage = curPage;
    },

    /** 提交按钮 */
    submitForm: function () {
      if (this.submitParams.count === 0) {
        this.msgError("账户信息不能为空");
        return;
      }

      this.$set(this.rules.acctCardNo[0], "required", false);
      this.$set(this.rules.acctnm[0], "required", false);
      this.$set(this.rules.acctBrno[0], "required", false);
      this.$set(this.submitParams, "listCardNo", this.listCardNoList);
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          if ( this.submitParams.directSender !== "") {
            checkRcvStBrnoStatus(this.submitParams.directSender, "BEPS")
              .then((response) => {

              }).catch(err=>{
              this.$set(this.rules.acctCardNo[0], "required", true);
              this.$set(this.rules.acctnm[0], "required", true);
              this.$set(this.rules.acctBrno[0], "required", true);
              return
            });
          }

          this.loading = true;
          batchCustomerAccountEntrySave(this.submitParams)
            .then((response) => {
              this.msgSuccess("提交成功");
              this.formdisable = true;
              this.submitParams.rspId = response.result.rspId;
              this.visibleHiden=''
              this.loading = false;
            })
            .catch((err) => {
              this.$set(this.rules.acctCardNo[0], "required", true);
              this.$set(this.rules.acctnm[0], "required", true);
              this.$set(this.rules.acctBrno[0], "required", true);
              this.visibleHiden='none';
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      this.formdisable = false;
      this.visibleHiden='none';
      this.$set(this.rules.acctCardNo[0], "required", true);
      this.$set(this.rules.acctnm[0], "required", true);
      this.$set(this.rules.acctBrno[0], "required", true);
      this.$set(this.$refs.dataTable, "dataList", []);
      this.listCardNoList = [];
    },

    //增加行
    addRow() {
      this.$set(this.rules.directRecver[0], "required", false);
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          let list = {
            acctCardNo:this.submitParams.acctCardNo,
            acctnm:this.submitParams.acctnm,
            acctBrno:this.submitParams.acctBrno,
            acctBrname:this.submitParams.acctBrname,
            ctznidnb:this.submitParams.ctznidnb,
            telephone:this.submitParams.telephone,
          };
          this.$refs.dataTable.dataList.push(list);
          this.listCardNoList.push(list);
          this.$set(this.submitParams, "acctCardNo", undefined);
          this.$set(this.submitParams, "acctnm", undefined);
          this.$set(this.submitParams, "acctBrno", undefined);
          this.$set(this.submitParams, "acctBrname", undefined);
          this.$set(this.submitParams, "ctznidnb", undefined);
          this.$set(this.submitParams, "telephone", undefined);
          this.$set(this.submitParams, "count", this.listCardNoList.length);
          this.handleCurrentChange(this.curPage);

        }
        this.$set(this.rules.directRecver[0], "required", true);

      });
    },
    // 删除行
    deleteRow(index, row) {
      this.$confirm("确定删除该条信息吗？")
        .then((_) => {
          let delIndex = (this.curPage-1) * this.pageSize + index;
          this.listCardNoList.splice(delIndex, 1);
          this.$refs.dataTable.dataList = this.listCardNoList;
          if(index === 0 && this.curPage !== 1){
            this.handleCurrentChange(this.curPage-1);
          }else {
            this.handleCurrentChange(this.curPage);
          }
          this.$set(this.submitParams, "count", this.listCardNoList.length);
        })
        .catch((_) => {});
    },

    getChangeType(e) {
      let typeList = this.dictMap.MSG_TYPE148;
      for (let i = 0; i < typeList.length; i++) {
        if (typeList[i].value === e) {
          //dictValue，dictLabel保持和上面定义一致
          return typeList[i].value + "-" + typeList[i].text;
        }
      }
    },


    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag === "directRecver") {
        this.$set(this.submitParams, "directRecver", row.bankCode);
        this.$set(this.submitParams, "directRecverName", row.orgFullname);
      } else if (fromFlag === "acctBrno") {
        this.$set(this.submitParams, "acctBrno", row.bankCode);
        this.$set(this.submitParams, "acctBrname", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },


    checkbankcode(fromFlag) {

      if (fromFlag === "directRecver") {

        let directRecver = this.submitParams.directRecver;

        getBankInfByBankCode(directRecver)
          .then((response) => {

            if (response.code === "S" &&response.result !== undefined && response.result !== null) {
              this.$set(this.submitParams, "directRecver", response.result.bankCode);
              this.$set(this.submitParams, "directRecverName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "directRecver",null);
              this.$set(this.submitParams, "directRecverName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "directRecver",null);
            this.$set(this.submitParams, "directRecverName", null);
          });
      } else if (fromFlag === "acctBrno") {
        let acctBrno = this.submitParams.acctBrno;
        getBankInfByBankCode(acctBrno)
          .then((response) => {
            if (response.code == "S"&&response.result !== undefined && response.result !== null) {
              this.$set(this.submitParams, "acctBrno", response.result.bankCode);
              this.$set(this.submitParams, "acctBrname", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "acctBrno", null);
              this.$set(this.submitParams, "acctBrname", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "acctBrno", null);
            this.$set(this.submitParams, "acctBrname", null);
          });
      }
    },

  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
